<template>
  <div class="wrap">
    <!-- 智慧养老文字 -->
    <h4 class="appName">智慧养老App</h4>
    <div class="LoginContent">
      <!-- 账户密码 -->
      <van-cell-group
        class="group"
        v-for="(item, index) in inputlists"
        v-bind:key="index"
      >
        <van-field
          v-model="item.value"
          center
          clearable
          :left-icon="item.img"
          :placeholder="item.placeholder"
          :border="borderState"
          use-button-slot
          :adjust-position="adjustPos"
          :type="item.type"
        >
        </van-field>
      </van-cell-group>
      <!-- 验证码 -->
      <!-- <van-cell-group class="group">
        <van-field
          :value="identifyCode"
          center
          :left-icon="identifyInfo.img"
          :placeholder="identifyInfo.placeholder"
          :border="borderState"
          :adjust-position="adjustPos"
          use-button-slot
        >
          <van-button slot="button" size="small" type="primary">
            发送验证码
          </van-button>
        </van-field>
      </van-cell-group> -->
      <!-- 登录按钮 -->
      <van-button
        class="loginBtn"
        type="primary"
        color="linear-gradient(to left, #4bb0ff, #6149f6)"
        block
        @click="login"
        >登 录</van-button
      >
      <!-- 忘记密码/注册账户 -->
      <div>
        <a class="link fonts" href="#">忘记密码</a
        ><span class="fonts"> | </span>
        <a class="link fonts" href="#">注册账号</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import * as SERVICE from '../utils/service'
export default {
  data() {
    return {
      inputlists: [
        {
          name: '手机号',
          placeholder: '输入手机号',
          img: require('../../static/imgs/phone.png'),
          value: '',
          type: '',
        },
        {
          name: '密码',
          placeholder: '输入密码',
          img: require('../../static/imgs/secret.png'),
          value: '',
          type: 'password',
        },
      ],
      identifyInfo: {
        name: '验证码',
        placeholder: '输入验证码',
        img: require('../../static/imgs/identify1.png'),
      },
      identifyCode: '',
      borderState: false,
      adjustPos: true,
    }
  },
  methods: {
    /**login */
    login() {
      console.log('login')
      //手机号和密码验证
      // if(this.)
      console.log(this.$data.inputlists)
      let phoneNum = this.$data.inputlists[0].value,
        password = this.$data.inputlists[1].value
      if (!phoneNum || !password) {
        Notify({ type: 'warning', message: '用户名或密码不完整' })
        return false
      }
      //请求数据，请求登录
      SERVICE.getUserinfoByAccount(phoneNum, password).then((res) => {
        let data = res.data
        console.log(data)
        if (data.length != 0) {
          //保存用户信息[localstorage本地存储]
          localStorage.setItem('userinfo', JSON.stringify(data[0]))
          console.log(localStorage.getItem('userinfo'))
          //提示登陆成功
          Notify({ type: 'success', message: '登录成功！' })
          setTimeout(() => {
            this.$router.push({ path: 'home' })
          }, 3000)
        } else {
          Notify({ type: 'danger', message: '登录失败！' })
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
.van-button::before {
  position: inherit;
  content: none;
}
</style>
<style lang="less" scoped>
.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../static/imgs/loginBk.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  .appName {
    position: absolute;
    top: 15%;
    left: 20%;
    font-family: 'Comic Sans MS', cursive, sans-serif;
  }
}
.loginBk {
  width: 100%;
  height: 100%;
  background-image: url('../../static/imgs/loginBk.jpg');
}
.LoginContent {
  margin-top: 400px;
}
.group {
  position: static;
  width: 85%;
  margin: 0 auto;
}
.loginBtn {
  position: static;
  margin-top: 20px !important;
  width: 40%;
  height: 35px;
  margin: 0 auto;
  border-radius: 15%;
}
.fonts {
  font-size: 15px;
}
</style>
